<template>
  <div class="container">
    <!-- 顶部搜索栏 -->
    <div class="header-search-section">
      <div class="search-container">
        <div class="search-box">
          <div class="search-input-wrapper">
            <input 
              class="search-input" 
              v-model="searchText"
              placeholder="搜索法律问题、案例..." 
              @keyup.enter="handleSearch"
            />
            <button class="search-btn" @click="handleSearch">
              <span class="search-icon">🔍</span>
            </button>
          </div>
        </div>
        <div class="header-buttons">
          <button class="header-btn header-icon-btn customer-service-btn" @click="handleCustomerService">
            <span class="btn-icon">👥</span>
          </button>
          <button class="header-btn header-icon-btn messages-btn" @click="handleMessages">
            <span class="btn-icon">💬</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 顶部Banner轮播图 -->
    <div class="banner-section">
      <div class="banner-swiper" 
           @touchstart="handleTouchStart" 
           @touchmove="handleTouchMove" 
           @touchend="handleTouchEnd"
           @mouseenter="stopAutoPlay"
           @mouseleave="startAutoPlay">
        <div 
          class="banner-container"
          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        >
          <div 
            v-for="(banner, index) in banners" 
            :key="index"
            class="banner-item" 
            :style="{ background: banner.background }"
          >
            <div class="banner-content">
              <div class="banner-title">{{ banner.title }}</div>
              <div class="banner-desc">{{ banner.desc }}</div>
              <button class="btn btn-accent banner-btn" @click="handleBannerAction(banner.action)">
                {{ banner.buttonText }}
              </button>
            </div>
            <div class="banner-icon">{{ banner.icon }}</div>
          </div>
        </div>
        
        <!-- 左右箭头按钮 -->
        <div class="banner-arrow banner-arrow-left" @click="prevSlide">
          <span>‹</span>
        </div>
        <div class="banner-arrow banner-arrow-right" @click="nextSlide">
          <span>›</span>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="banner-indicators">
          <div 
            v-for="(banner, index) in banners" 
            :key="index"
            class="indicator"
            :class="{ active: currentIndex === index }"
            @click="goToSlide(index)"
          ></div>
        </div>
      </div>
    </div>

    <!-- 快速描述问题区域 -->
    <div class="quick-input-section">
      <div class="quick-input-card">
        <div class="input-header">
          <span class="input-title">不知道如何解决现有问题？</span>
          <span class="input-subtitle">为您推荐最佳解决方案</span>
        </div>
        <div class="input-container">
          <input 
            class="problem-input" 
            v-model="problemText" 
            placeholder="例如：公司欠薪怎么办？"
            @keyup.enter="startEvaluation"
          />
          <button class="voice-btn" @click="startVoiceInput">
            <span class="voice-icon">🎤</span>
          </button>
        </div>
        <div class="action-buttons">
          <button class="btn btn-accent btn-large evaluate-btn" @click="startEvaluation">
            点击生成方案
            <span class="free-badge">免费</span>
          </button>
        </div>
      </div>
    </div>


    <!-- 诉讼陪同广告区域 -->
    <div class="litigation-accompaniment-section">
      <div class="litigation-accompaniment-card">
        <div class="litigation-accompaniment-main">
          <div class="litigation-accompaniment-info">
            <div class="litigation-accompaniment-title">诉讼陪同服务</div>
            <div class="litigation-accompaniment-subtitle">专业律师全程陪同</div>
            <div class="accompaniment-features">
              <span class="feature-tag">👥 全程陪同</span>
              <span class="feature-tag">⚔️ 出庭代理</span>
              <span class="feature-tag">📝 材料准备</span>
            </div>
          </div>
          <div class="accompaniment-cta">
            <button class="accompaniment-btn" @click="navigateToLitigationAccompaniment">
              立即预约
            </button>
          </div>
        </div>
      </div>
    </div>

    

    <!-- 法律辅助服务区域 -->
    <div class="legal-service-section">
      <div class="legal-service-card">
        <div class="legal-service-header">
          <div class="legal-service-title">法律辅助服务</div>
        </div>
        <div class="legal-service-grid">
          <div 
            class="legal-service-item" 
            v-for="(item, index) in legalServiceItems" 
            :key="index"
            @click="navigateToLegalService(item.action)"
          >
            <div class="legal-service-icon" :style="{ backgroundColor: item.color }">
              <span class="icon-text">{{ item.icon }}</span>
            </div>
            <div class="legal-service-text">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>

    


    <!-- 悬浮客服按钮 -->
    <div class="floating-service" @click="showServiceOptions">
      <span class="service-icon">💬</span>
    </div>

    <!-- 底部导航 -->
    <bottom-nav-h5
      :items="navItems"
      :current="navCurrentIndex"
      theme="blue"
      @change="handleNavChange"
    />
  </div>
</template>

<script>
import BottomNavH5 from '@/components/bottom-nav-h5/bottom-nav-h5.vue'
import routerManager from '../../utils/router.js'

// 为普通 Vue 项目创建 uni 对象模拟
if (typeof uni === 'undefined') {
  uni = {
    navigateTo(options) {
      if (options.url) {
        // 构建目标 URL（不添加 .html 扩展名，因为开发服务器不支持）
        let targetUrl
        if (options.url.startsWith('/')) {
          // 绝对路径，从根目录开始
          targetUrl = window.location.origin + options.url
        } else {
          // 相对路径，从当前目录开始
          const baseUrl = window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, '')
          targetUrl = baseUrl + '/' + options.url
        }
        
        // 执行实际页面跳转
        try {
          window.location.href = targetUrl
          
          setTimeout(() => {
            if (options.success) {
              options.success({ errMsg: 'navigateTo:ok' })
            }
          }, 100)
        } catch (error) {
          if (options.fail) {
            options.fail({ errMsg: 'navigateTo:fail' })
          }
        }
      }
    },
    reLaunch(options) {
      if (options.url) {
        // 构建完整的目标 URL（不添加 .html 扩展名）
        let targetUrl, urlPath
        if (options.url.startsWith('/')) {
          // 绝对路径，从根目录开始
          targetUrl = window.location.origin + options.url
          urlPath = options.url
        } else {
          // 相对路径，从当前目录开始
          const baseUrl = window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, '')
          targetUrl = baseUrl + '/' + options.url
          urlPath = window.location.pathname.replace(/\/[^\/]*$/, '') + '/' + options.url
        }
        
        // 使用 pushState 更新 URL，显示完整路径
        window.history.pushState(null, '', urlPath)
        
        // 直接调用 App 实例的路由处理方法
        const app = this.$root
        if (app && app.handleRouteChange) {
          app.handleRouteChange()
        } else {
          // 备用方案：触发 popstate 事件
          window.dispatchEvent(new PopStateEvent('popstate'))
        }
        
        setTimeout(() => {
          if (options.success) {
            options.success({ errMsg: 'reLaunch:ok' })
          }
        }, 100)
      }
    },
    showToast(options) {
      alert(options.title || '提示')
    },
    showLoading(options) {
      // Loading显示功能
    },
    hideLoading() {
      // Loading隐藏功能
    },
    showModal(options) {
      const result = confirm(options.content || '确认操作？')
      if (options.success) {
        options.success({
          confirm: result,
          cancel: !result
        })
      }
    },
    getSystemInfoSync() {
      return {
        platform: 'h5',
        system: 'Windows 10',
        model: 'PC',
        version: '1.0.0',
        pixelRatio: window.devicePixelRatio || 1,
        screenWidth: window.screen.width,
        screenHeight: window.screen.height,
        windowWidth: window.innerWidth,
        windowHeight: window.innerHeight,
        statusBarHeight: 0,
        safeArea: {
          left: 0,
          right: window.innerWidth,
          top: 0,
          bottom: window.innerHeight,
          width: window.innerWidth,
          height: window.innerHeight
        },
        safeAreaInsets: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }
      }
    },
    switchTab(options) {
      if (options.url) {
        // switchTab 通常用于切换 tabBar 页面，这里直接调用 reLaunch
        this.reLaunch(options)
      }
    }
  }
}

export default {
  name: 'Index',
  components: {
    BottomNavH5
  },
  data() {
    return {
      problemText: '',
      searchText: '',
      unreadCount: 3, // 未读消息数量，示例数据
      currentIndex: 0,
      autoPlayTimer: null,
      touchStartX: 0,
      touchEndX: 0,
      // 底部导航数据
      navCurrentIndex: 0,
      navItems: [
        {
          text: '首页',
          iconText: '🏠',
          pagePath: '/pages/index/index'
        },
        {
          text: '便民服务',
          iconText: '🛠️',
          pagePath: '/pages/tools/index'
        },
        {
          text: '我的',
          iconText: '👤',
          pagePath: '/pages/personal-center/index'
        }
      ],
      banners: [
        {
          title: '智能评估',
          desc: 'AI智能分析您的法律问题',
          icon: '🤖',
          background: 'linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%)',
          buttonText: '立即评估',
          action: 'evaluation'
        },
        {
          title: '专业律师',
          desc: '资深律师一对一服务',
          icon: '⚖️',
          background: 'linear-gradient(135deg, #FF6B35 0%, #F7931E 100%)',
          buttonText: '找律师',
          action: 'lawyer'
        },
        {
          title: '全程追踪',
          desc: '实时了解案件进展',
          icon: '📊',
          background: 'linear-gradient(135deg, #28a745 0%, #20c997 100%)',
          buttonText: '查看进度',
          action: 'progress'
        }
      ],
      legalServiceItems: [
        {
          title: 'AI法律咨询',
          icon: '🤖',
          color: '#9B59B6',
          action: 'ai-consultation'
        },
        {
          title: '找律师',
          icon: '⚖️',
          color: '#28a745',
          action: 'find-lawyer'
        },
        {
          title: '我要公证',
          icon: '📜',
          color: '#17a2b8',
          action: 'notarization'
        },
        {
          title: '我要调解',
          icon: '🛡️',
          color: '#6f42c1',
          action: 'mediation'
        },
        {
          title: '我要起诉',
          icon: '⚔️',
          color: '#dc3545',
          action: 'lawsuit'
        },
        {
          title: '诉讼陪同',
          icon: '👥',
          color: '#fd7e14',
          action: 'litigation-accompaniment'
        },
        {
          title: '我要仲裁',
          icon: '⚖️',
          color: '#28a745',
          action: 'arbitration'
        }
      ],
      freeServiceItems: [
        {
          title: 'AI 法律咨询',
          icon: '🤖',
          color: '#9B59B6',
          path: '/pages/tools/index?type=ai-consultation'
        },
        {
          title: '合同审查',
          icon: '📋',
          color: '#3498DB',
          path: '/pages/tools/index?type=contract-review'
        },
        {
          title: '法条查询',
          icon: '📖',
          color: '#E74C3C',
          path: '/pages/tools/index?type=law-search'
        },
        {
          title: '文书生成',
          icon: '📝',
          color: '#F39C12',
          path: '/pages/tools/index?type=document-generate'
        }
      ]
    }
  },
  methods: {
    // 底部导航切换
    handleNavChange(event) {
      this.navCurrentIndex = event.index
      const item = event.item // 直接使用事件传递的 item
      if (item.pagePath && item.pagePath !== '/pages/index/index') {
        this.navigateTo(item.pagePath)
      } else {
      }
    },
    
    navigateTo(path) {
      if (path === '/pages/index/index') {
        return
      }
      
      // 底部导航的页面列表
      const tabPages = [
        '/pages/index/index',
        '/pages/tools/index',
        '/pages/personal-center/index'
      ]
      
      if (tabPages.includes(path)) {
        // 对于底部导航页面，使用 reLaunch 避免页面栈问题
        routerManager.reLaunch(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            // 兼容性处理：如果路由管理器失败，显示提示
            alert('页面跳转失败')
          }
        })
      } else {
        // 其他页面使用 navigateTo
        routerManager.navigateTo(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            alert('页面跳转失败')
          }
        })
      }
    },
    navigateToLegalService(action) {
      switch(action) {
        case 'ai-consultation':
          // 跳转到AI法律咨询页面
          routerManager.navigateTo('/pages/tools/index?type=ai-consultation')
          break
        case 'find-lawyer':
          break
        case 'notarization':
          break
        case 'mediation':
          break
        case 'lawsuit':
          break
        case 'litigation-accompaniment':
          break
        case 'arbitration':
          break
        default:
          break
      }
    },
    navigateToLitigationAccompaniment() {
      // 跳转到诉讼陪同服务页面
    },
    handleBannerAction(action) {
      switch(action) {
        case 'evaluation':
          // 跳转到便民服务页面
          this.navigateTo('/pages/tools/index')
          break
        case 'lawyer':
          this.navigateTo('/pages/solution-recommend/index')
          break
        case 'progress':
          // 跳转到便民服务页面
          this.navigateTo('/pages/tools/index')
          break
      }
    },
    startEvaluation() {
      
      if (!this.problemText.trim()) {
        uni.showToast({
          title: '请输入问题描述',
          icon: 'none'
        })
        return
      }
      
      // 存储问题文本到本地存储
      try {
        localStorage.setItem('problemText', this.problemText)
        localStorage.setItem('evaluationTimestamp', Date.now().toString())
      } catch (e) {
      }
      
      // H5 environment: use window.location.href to avoid uni-app auto-adding .html extension
      const targetUrl = '/pages/smart-evaluation'  // Remove /index, let router handle it
      
      // Show loading indicator
      uni.showLoading({
        title: '正在跳转...'
      })
      
      // Try direct navigation first (recommended approach)
      try {
        const fullUrl = window.location.origin + targetUrl
        
        // Direct navigation
        window.location.href = fullUrl
        
        // Delay hiding loading (page will reload)
        setTimeout(() => {
          uni.hideLoading()
        }, 500)
        
        return  // Navigation successful, return directly
        
      } catch (directError) {
      }
      
      // Fallback to uni.navigateTo if direct navigation fails
      uni.navigateTo({
        url: targetUrl,
        success: (res) => {
          uni.hideLoading()
          
          // 延迟检查页面是否正常加载
          setTimeout(() => {
          }, 1000)
        },
        fail: (err) => {
          
          // 尝试备选方案: reLaunch
          uni.reLaunch({
            url: targetUrl,
            success: (res) => {
              uni.hideLoading()
              
              setTimeout(() => {
              }, 1000)
            },
            fail: (err2) => {
              uni.hideLoading()
              
              // 尝试最后的备选方案: 直接修改window.location
              try {
                // 如果是H5环境，尝试直接跳转
                if (window.location) {
                  const newUrl = window.location.origin + targetUrl
                  window.location.href = newUrl
                } else {
                  throw new Error('window.location 不可用')
                }
              } catch (locationErr) {
                
                // 显示详细错误信息
                const errorMsg = err.errMsg || err2.errMsg || '所有跳转方式均失败'
                uni.showModal({
                  title: '页面跳转失败',
                  content: `错误信息: ${errorMsg}\n\n已尝试的方法:\n1. uni.navigateTo - 失败\n2. uni.reLaunch - 失败\n3. 直接跳转 - 失败\n\n请检查控制台日志了解详细信息`,
                  showCancel: false,
                  success: () => {
                  }
                })
              }
            }
          })
        }
      })
    },
    testNavigation() {
      
      // Direct navigation using window.location.href to avoid uni-app adding .html extension
      const targetUrl = '/pages/smart-evaluation'
      
      uni.showLoading({
        title: '测试跳转中...'
      })
      
      try {
        const fullUrl = window.location.origin + targetUrl
        
        // Direct navigation
        window.location.href = fullUrl
        
        setTimeout(() => {
          uni.hideLoading()
        }, 500)
        
        
      } catch (error) {
        uni.hideLoading()
        
        // Fallback option
        uni.navigateTo({
          url: targetUrl,
          success: (res) => {
            uni.hideLoading()
            
            setTimeout(() => {
            }, 1000)
          },
          fail: (err) => {
            uni.hideLoading()
            uni.showModal({
              title: '测试结果',
              content: `跳转失败: ${JSON.stringify(err)}`,
              showCancel: false
            })
          }
        })
      }
    },
    startVoiceInput() {
      // 检查浏览器是否支持语音识别
      if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
        uni.showToast({
          title: '您的浏览器不支持语音识别功能',
          icon: 'none'
        })
        return
      }

      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      const recognition = new SpeechRecognition()
      
      // 配置语音识别
      recognition.lang = 'zh-CN'
      recognition.continuous = false
      recognition.interimResults = false
      recognition.maxAlternatives = 1

      // 开始识别提示
      uni.showToast({
        title: '请说话...',
        icon: 'none',
        duration: 3000
      })

      recognition.onstart = () => {
        console.log('语音识别开始')
      }

      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript
        this.problemText = transcript
        
        uni.showToast({
          title: '识别成功',
          icon: 'success'
        })
      }

      recognition.onerror = (event) => {
        console.error('语音识别出错', event.error)
        let errorMessage = '语音识别失败'
        
        switch (event.error) {
          case 'no-speech':
            errorMessage = '未检测到语音'
            break
          case 'audio-capture':
            errorMessage = '无法获取麦克风'
            break
          case 'not-allowed':
            errorMessage = '请允许麦克风权限'
            break
          case 'network':
            errorMessage = '网络错误'
            break
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none'
        })
      }

      recognition.onend = () => {
        console.log('语音识别结束')
      }

      // 开始语音识别
      recognition.start()
    },
    showServiceOptions() {
      // 移除客服选择弹窗，直接进入智能客服
    },
    // 轮播图方法
    goToSlide(index) {
      this.currentIndex = index
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.banners.length
    },
    prevSlide() {
      this.currentIndex = this.currentIndex === 0 ? this.banners.length - 1 : this.currentIndex - 1
    },
    startAutoPlay() {
      this.autoPlayTimer = setInterval(() => {
        this.nextSlide()
      }, 4000)
    },
    stopAutoPlay() {
      if (this.autoPlayTimer) {
        clearInterval(this.autoPlayTimer)
        this.autoPlayTimer = null
      }
    },
    // 搜索功能
    handleSearch() {
      if (!this.searchText.trim()) {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        })
        return
      }
      
      // 跳转到搜索结果页面
      uni.navigateTo({
        url: `/pages/search-results/index?keyword=${encodeURIComponent(this.searchText.trim())}`,
        fail: (err) => {
          // 如果搜索结果页面不存在，使用便民服务页面替代
          uni.navigateTo({
            url: `/pages/tools/index?search=${encodeURIComponent(this.searchText.trim())}`,
            success: () => {
              uni.showToast({
                title: '搜索中...',
                icon: 'loading'
              })
            },
            fail: () => {
              uni.showToast({
                title: '搜索功能暂不可用',
                icon: 'none'
              })
            }
          })
        }
      })
    },
    
    // 客服功能
    handleCustomerService() {
      uni.showActionSheet({
        itemList: ['在线客服', '电话客服', '意见反馈'],
        success: (res) => {
          switch(res.tapIndex) {
            case 0:
              // 在线客服
              uni.navigateTo({
                url: '/pages/customer-service/index',
                fail: () => {
                  uni.showModal({
                    title: '客服服务',
                    content: '在线客服功能正在开发中，您可以通过电话联系我们',
                    showCancel: false
                  })
                }
              })
              break
            case 1:
              // 电话客服
              uni.showModal({
                title: '客服电话',
                content: '客服热线：400-888-8888\n工作时间：9:00-18:00',
                confirmText: '拨打',
                success: (res) => {
                  if (res.confirm) {
                    uni.makePhoneCall({
                      phoneNumber: '400-888-8888',
                      fail: () => {
                        uni.showToast({
                          title: '拨打失败，请手动拨打',
                          icon: 'none'
                        })
                      }
                    })
                  }
                }
              })
              break
            case 2:
              // 意见反馈
              uni.navigateTo({
                url: '/pages/feedback/index',
                fail: () => {
                  uni.showModal({
                    title: '意见反馈',
                    content: '意见反馈功能正在开发中，您可以通过客服电话联系我们',
                    showCancel: false
                  })
                }
              })
              break
          }
        }
      })
    },
    
    // 消息功能
    handleMessages() {
      uni.navigateTo({
        url: '/pages/messages/index',
        success: () => {
          // 重置未读消息数量
          this.unreadCount = 0
        },
        fail: () => {
          // 如果消息页面不存在，显示暂无消息
          uni.showModal({
            title: '系统消息',
            content: '暂无新消息\n\n消息功能正在完善中，敬请期待！',
            showCancel: false,
            confirmText: '知道了',
            success: () => {
              // 重置未读消息数量
              this.unreadCount = 0
            }
          })
        }
      })
    },
    
    // 触摸事件处理
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX
      this.stopAutoPlay()
    },
    handleTouchMove(e) {
      this.touchEndX = e.touches[0].clientX
    },
    handleTouchEnd() {
      const diff = this.touchStartX - this.touchEndX
      const threshold = 50 // 滑动阈值
      
      if (Math.abs(diff) > threshold) {
        if (diff > 0) {
          // 向左滑动，显示下一张
          this.nextSlide()
        } else {
          // 向右滑动，显示上一张
          this.prevSlide()
        }
      }
      
      this.startAutoPlay()
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  beforeUnmount() {
    this.stopAutoPlay()
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  min-height: 100vh;
  position: relative;
  padding-bottom: 100px; /* 为底部导航留出空间 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; /* 防止横向滚动 */
  box-sizing: border-box;
}

/* 顶部搜索栏样式 */
.header-search-section {
  background: transparent; /* 去掉蓝色背景 */
  padding: 6px 12px 10px; /* 减少左右padding */
  box-shadow: none; /* 去掉阴影 */
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 减少间距 */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.search-box {
  flex: 1;
  position: relative;
  min-width: 0; /* 允许弹性压缩 */
  max-width: 100%;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  height: 36px;
}

.search-input-wrapper:focus-within {
  box-shadow: 0 6px 24px rgba(24, 91, 187, 0.2);
  transform: translateY(-1px);
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 14px;
  font-size: 15px;
  background: transparent;
  color: #333;
  border-radius: 18px;
  font-weight: 400;
  height: 32px;
}

.search-input::placeholder {
  color: #999;
  font-weight: 400;
}

.search-btn {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.search-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.search-btn:active {
  transform: scale(0.95);
}

.search-icon {
  font-size: 16px;
  color: white;
}

/* 顶部按钮组 */
.header-buttons {
  display: flex;
  gap: 4px; /* 减少间距 */
  flex-shrink: 0;
  max-width: 80px; /* 限制最大宽度 */
}

.header-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  min-width: 64px;
  min-height: 64px;
}

/* 只显示图标的按钮样式 */
.header-icon-btn {
  min-width: 32px; /* 减少最小宽度 */
  min-height: 32px; /* 减少最小高度 */
  padding: 6px; /* 减少内边距 */
  border-radius: 50%;
  max-width: 36px; /* 限制最大宽度 */
  max-height: 36px; /* 限制最大高度 */
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-btn:active {
  transform: translateY(0);
}

.btn-icon {
  font-size: 20px;
  margin-bottom: 4px;
  line-height: 1;
}

/* 图标按钮中的图标样式 */
.header-icon-btn .btn-icon {
  font-size: 16px; /* 稍微减小图标 */
  margin-bottom: 0;
}

.btn-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* 消息徽章 */
.message-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: #FF4757;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  animation: pulse 2s infinite;
}

.container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(24, 91, 187, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(52, 116, 235, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Banner轮播图 */
.banner-section {
  margin-bottom: 40px;
  padding: 0 20px;
}

.banner-swiper {
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 调整阴影颜色 */
  position: relative;
  cursor: grab;
  background: #ffffff; /* 改为白色背景 */
}

.banner-swiper:active {
  cursor: grabbing;
}

.banner-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-item {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  color: white;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-width: 100%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #185BBB 0%, #3474EB 100%);
}

.banner-content {
  flex: 1;
  z-index: 2;
}

.banner-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-desc {
  font-size: 16px;
  opacity: 0.95;
  margin-bottom: 20px;
  line-height: 1.4;
  font-weight: 400;
}

.banner-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.banner-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.banner-icon {
  font-size: 80px;
  opacity: 0.15;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* 轮播指示器 */
.banner-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #FF6B35;
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* 轮播箭头按钮 */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.banner-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.banner-arrow-left {
  left: 15px;
}

.banner-arrow-right {
  right: 15px;
}

/* 法律辅助服务区域 */
.legal-service-section {
  margin: 0 20px 28px 20px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.legal-service-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(24, 91, 187, 0.08);
  border: 1px solid rgba(24, 91, 187, 0.05);
  position: relative;
  overflow: hidden;
}

.legal-service-header {
  text-align: center;
  margin-bottom: 24px;
}

.legal-service-title {
  font-size: 22px;
  font-weight: 700;
  color: #185BBB;
  margin-bottom: 0;
}

.legal-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.legal-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.legal-service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.legal-service-item:hover::before {
  opacity: 1;
}

.legal-service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.1);
}

.legal-service-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.legal-service-icon .icon-text {
  font-size: 24px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.legal-service-text {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.legal-service-item:active {
  transform: translateY(-2px) scale(0.98);
}

/* 诉讼陪同广告区域 */
.litigation-accompaniment-section {
  margin: 0 20px 32px 20px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.litigation-accompaniment-card {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(255, 107, 53, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.litigation-accompaniment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0A2463 0%, #1E3A8A 50%, #28a745 100%);
}

.litigation-accompaniment-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.litigation-accompaniment-info {
  flex: 1;
}

.litigation-accompaniment-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.litigation-accompaniment-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-bottom: 6px;
}

.accompaniment-features {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.feature-tag:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.accompaniment-cta {
  flex-shrink: 0;
}

.accompaniment-btn {
  background: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(10, 36, 99, 0.3);
  white-space: nowrap;
  min-width: 70px;
}

.accompaniment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 36, 99, 0.4);
}

.accompaniment-btn:active {
  transform: translateY(0);
}

/* 快速输入区域 */
.quick-input-section {
  margin-bottom: 28px;
  padding: 0 20px;
}

.quick-input-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(10, 36, 99, 0.1);
  border: 1px solid rgba(10, 36, 99, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.quick-input-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0A2463 0%, #185BBB 50%, #FF6B35 100%);
  border-radius: 28px 28px 0 0;
}

.input-header {
  text-align: center;
  margin-bottom: 24px;
}

.input-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.input-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.input-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20px;
  padding: 0 24px;
  margin-bottom: 24px;
  border: 2px solid rgba(10, 36, 99, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(10, 36, 99, 0.04);
}

.input-container:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.12), 0 0 0 3px rgba(10, 36, 99, 0.08);
  transform: translateY(-1px);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.problem-input {
  flex: 1;
  padding: 18px 0;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  font-weight: 400;
  line-height: 1.5;
}

.problem-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.voice-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  margin-left: 12px;
  flex-shrink: 0;
}

.voice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.voice-icon {
  font-size: 18px;
  color: white;
}

.evaluate-btn {
  flex: 1;
  height: 48px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border: none;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
  position: relative;
}

/* 免费徽记样式 */
.free-badge {
  position: absolute;
  top: -2px;
  right: 8px;
  background: #FF4757;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid #ffffff;
  min-width: 24px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
  z-index: 1;
}

.evaluate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
}


/* 悬浮客服按钮 */
.floating-service {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #185BBB 0%, #3474EB 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(24, 91, 187, 0.4);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: 3px solid white;
}

.floating-service:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(24, 91, 187, 0.5);
}

.floating-service:active {
  transform: scale(0.95);
}

.service-icon {
  font-size: 24px;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  /* H5端头部搜索区域优化 */
  .header-search-section {
    padding: 6px 10px 10px; /* 减少padding防止内容过宽 */
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .search-container {
    gap: 6px; /* 减少间距 */
  }
  
  .header-buttons {
    gap: 3px; /* 减少间距 */
    margin-right: 6px; /* 为滚动条留出空间 */
    max-width: 70px; /* 限制按钮组最大宽度 */
  }
  
  .header-icon-btn {
    min-width: 30px; /* 减少最小宽度 */
    min-height: 30px; /* 减少最小高度 */
    max-width: 32px; /* 限制最大宽度 */
    max-height: 32px; /* 限制最大高度 */
    padding: 5px; /* 减少内边距 */
  }
  
  .header-icon-btn .btn-icon {
    font-size: 15px; /* 减小图标 */
  }
  
  .message-badge {
    top: 2px;
    right: 6px;
    font-size: 9px;
    padding: 1px 4px;
    min-width: 14px;
    height: 14px;
  }

  .banner-section {
    padding: 0 16px;
  }
  
  .banner-swiper {
    height: 180px;
  }
  
  .banner-title {
    font-size: 24px;
  }
  
  .banner-desc {
    font-size: 14px;
  }
  
  .banner-icon {
    font-size: 60px;
  }
  
  .legal-service-section {
    margin: 0 16px 20px 16px;
  }
  
  .legal-service-card {
    padding: 24px;
  }
  
  .litigation-accompaniment-section {
    margin: 0 16px 24px 16px;
  }
  
  .litigation-accompaniment-card {
    padding: 24px;
  }
  
  .litigation-accompaniment-main {
    gap: 10px;
  }
  
  .litigation-accompaniment-title {
    font-size: 14px;
  }
  
  .litigation-accompaniment-subtitle {
    font-size: 10px;
  }
  
  .feature-tag {
    font-size: 9px;
    padding: 1px 4px;
  }
  
  .accompaniment-btn {
    font-size: 11px;
    padding: 6px 12px;
    min-width: 60px;
  }
  
  
  .service-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .accompaniment-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .legal-service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .legal-service-item {
    padding: 16px 8px;
  }
  
  .legal-service-icon {
    width: 50px;
    height: 50px;
  }
  
  .legal-service-icon .icon-text {
    font-size: 20px;
  }
  
  .legal-service-text {
    font-size: 12px;
  }
  
  
  .function-item {
    padding: 14px 6px;
  }
  
  .function-icon {
    width: 44px;
    height: 44px;
  }
  
  .function-icon .icon-text {
    font-size: 18px;
  }
  
  .function-text {
    font-size: 11px;
  }
  
  
  .quick-input-section {
    padding: 0 16px;
    margin-bottom: 20px;
  }
  
  .quick-input-card {
    padding: 24px 20px;
  }
  
  .input-title {
    font-size: 20px;
  }
  
  .input-subtitle {
    font-size: 14px;
  }
  
  
  .floating-service {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
  
  .service-icon {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  /* 小屏设备进一步优化 */
  .header-search-section {
    padding: 6px 8px 10px; /* 进一步减少padding */
  }
  
  .search-container {
    gap: 4px; /* 减少间距 */
  }
  
  .header-buttons {
    margin-right: 8px; /* 为滚动条留出空间 */
    max-width: 64px; /* 进一步限制宽度 */
    gap: 2px; /* 减少按钮间距 */
  }
  
  .header-icon-btn {
    min-width: 28px; /* 进一步减少最小宽度 */
    min-height: 28px; /* 进一步减少最小高度 */
    max-width: 30px; /* 限制最大宽度 */
    max-height: 30px; /* 限制最大高度 */
    padding: 4px; /* 减少内边距 */
  }
  
  .header-icon-btn .btn-icon {
    font-size: 14px; /* 进一步减小图标 */
  }

  .banner-swiper {
    height: 160px;
  }
  
  .banner-item {
    padding: 24px 20px;
  }
  
  .banner-title {
    font-size: 20px;
  }
  
  .banner-desc {
    font-size: 13px;
  }
  
  .banner-icon {
    font-size: 50px;
  }
  
  .legal-service-section {
    margin: 0 12px 18px 12px;
  }
  
  .legal-service-card {
    padding: 20px;
  }
  
  .quick-input-section {
    padding: 0 12px;
    margin-bottom: 18px;
  }
  
  .quick-input-card {
    padding: 20px 16px;
  }
  
  .litigation-accompaniment-section {
    margin: 0 12px 20px 12px;
  }
  
  .litigation-accompaniment-card {
    padding: 20px;
  }
  
  .litigation-accompaniment-main {
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .litigation-accompaniment-info {
    flex: 1;
  }
  
  .litigation-accompaniment-title {
    font-size: 13px;
    margin-bottom: 3px;
  }
  
  .litigation-accompaniment-subtitle {
    font-size: 9px;
    margin-bottom: 4px;
  }
  
  .feature-tag {
    font-size: 8px;
    padding: 1px 3px;
    gap: 4px;
  }
  
  .accompaniment-cta {
    flex-shrink: 0;
  }
  
  .accompaniment-btn {
    font-size: 10px;
    padding: 5px 10px;
    min-width: 60px;
  }
  
  
  .service-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .accompaniment-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .legal-service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .legal-service-item {
    padding: 14px 6px;
  }
  
  .legal-service-icon {
    width: 45px;
    height: 45px;
  }
  
  .legal-service-icon .icon-text {
    font-size: 18px;
  }
  
  .legal-service-text {
    font-size: 11px;
  }
  
  
  .function-item {
    padding: 12px 6px;
  }
  
  .function-icon {
    width: 40px;
    height: 40px;
  }
  
  .function-icon .icon-text {
    font-size: 16px;
  }
  
  .function-text {
    font-size: 10px;
  }
  
  .function-grid .function-item:nth-child(4) {
    grid-column: 1;
  }
  
  .function-grid .function-item:nth-child(5) {
    grid-column: 2;
  }
  
  .function-grid .function-item:nth-child(6) {
    grid-column: 3;
  }
  
}

/* 现代化动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.banner-section {
  animation: fadeInUp 0.8s ease-out;
}

.quick-input-section {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}



.floating-service {
  animation: slideInRight 0.8s ease-out 0.8s both;
}

/* 微交互效果 */

.voice-btn:active {
  transform: scale(0.95);
}

.evaluate-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* 加载状态动画 */
.loading {
  animation: pulse 2s infinite;
}

/* 现代化滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0A2463 0%, #FF6B35 100%);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #082A5A 0%, #E55A2B 100%);
}

/* H5端滚动条优化 */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  /* 确保容器不会被滚动条影响 */
  .container {
    overflow-x: hidden;
  }
  
  /* 头部区域固定，避免滚动时被遮挡 */
  .header-search-section {
    box-shadow: 0 2px 12px rgba(24, 91, 187, 0.15);
  }
}
</style>